<template>
  <a-drawer
    :visible="visible"
    title="创建活动"
    width="40%"
    :maskClosable="false"
    @close="onClose">
    <a-form-model ref="infoFormModel" :model="saveObject" layout="vertical" :rules="rules">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item label="应用 AppId" prop="appId">
            <a-select v-model="saveObject.appId" placeholder="请选择">
              <a-select-option v-for="(item) in mchAppList" :key="item.appId" >{{ item.appName }} [{{ item.appId }}]</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="活动名称" prop="couponName">
            <a-input v-model="saveObject.couponName" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="红包总金额" prop="totalAmount">
            <a-input v-model="saveObject.totalAmount" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="红包个数" prop="totalCount">
            <a-input v-model="saveObject.totalCount" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="活动时间">
            <a-range-picker
              @change="onChange"
              :show-time="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              :disabled-date="disabledDate"
            >
              <a-icon slot="suffixIcon" type="sync" />
            </a-range-picker>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="活动描述" prop="prizeMsg">
            <a-input v-model="saveObject.prizeMsg" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <div class="drawer-btn-center">
      <a-button @click="onClose" icon="close" :style="{ marginRight: '8px' }">取消</a-button>
      <a-button type="primary" @click="onSubmit" icon="check" >保存</a-button>
    </div>

  </a-drawer>
</template>

<script>
import { API_URL_MARKETING_ADD, req, API_URL_MCH_APP } from '@/api/manage'
import moment from 'moment'
export default {
  props: {
    callbackFunc: { type: Function, default: () => () => ({}) }
  },

  data () {
    return {
      isAdd: true, // 新增 or 修改
      visible: false, // 抽屉开关
      appId: '', // 应用AppId
      saveObject: {}, // 数据对象
      mchAppList: [], // app列表
      rules: {
        appId: [{ required: true, message: '请输入应用ID', trigger: 'blur' }],
        couponName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        prizeMsg: [{ required: true, message: '请输入活动描述', trigger: 'blur' }],
        totalAmount: [{ required: true, message: '请输入红包总金额', trigger: 'blur' }],
        totalCount: [{ required: true, message: '请输入个数', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    // 请求接口，获取所有的appid，只有此处进行pageSize=-1传参
    req.list(API_URL_MCH_APP, { pageSize: -1 }).then(res => {
      this.mchAppList = res.records
    })
  },
  methods: {
    moment,
    disabledDate (current) { // 今日之后日期不可选
      return current && current < moment().subtract(1, 'days')
    },
    // 变更 appId的事件
    changeAppId (value) {
      this.saveObject.appId = value // 根据appId的值，动态显示支付方式
    },
    onChange (date, dateString) {
      this.saveObject.startTime = dateString[0] // 开始时间
      this.saveObject.endTime = dateString[1] // 结束时间
    },
    // 抽屉显示
    show () {
      this.visible = true // 展示弹层信息
    },
    // 表单提交
    onSubmit () {
      const that = this
      if (!that.saveObject.startTime) {
        that.$message.warn('请选择活动时间')
        return
      }
      this.$refs.infoFormModel.validate(valid => {
        if (valid) { // 验证通过
          delete that.saveObject.appSecret_ph
          req.add(API_URL_MARKETING_ADD, that.saveObject).then(res => {
            window.open(res)
            // that.$message.success('创建成功')
            that.visible = false
            that.callbackFunc() // 刷新列表
          })
        }
      })
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
</style>
